<template>
  <lay-container fluid="true" style="padding: 10px">
      <lay-row :space="10">
          <lay-col :md="24">
              <lay-card>
                  <div style="margin-top:20px;">
                      <lay-row>
                          <lay-col :md="24">
                              <div class="home-tips shadow" style="background:rgb(230, 230, 230);">
                                  <div class="home-tips-container" style="    height: auto;">
                                      <div class="demoTable">
                                          <div class="layui-inline" style="width:90%">
                                              <input class="layui-btn layui-btn-sm" type="text" v-model="pageconfig.search.title" placeholder="搜索" style="text-align: left;color: #009688; background-color: #fff;width:100%">
                                          </div>
                                          <button class="layui-btn layui-btn-sm" @click="a_search()">搜索</button>
                                      </div>
                                  </div>
                              </div>
                          </lay-col>
              
                      </lay-row>
                  </div>
              </lay-card>
          </lay-col>
          <lay-col :md="24">
              <lay-card>
                  <lay-row :space="5">
                      <lay-col :md="6" v-for="(item,index) in pageconfig.data.data" :key="index">
                          <lay-card class="card-list-item">
                              <div v-if="item.biggic!=null&&item.biggic!=''">
                                  <div class="alone">
                                      <router-link :to="'/news/down?id='+item.id" :title="item.title">
                                          <img style="    height: 200px;" :src="item.biggic.split(',')[0]" :title="item.title"/>
                                      </router-link>
                                    
                       
                                  </div>
                           
                              </div>
                  
                                  <div style="   height: 42px;line-height: 42px;padding: 0 15px; border-top: 1px solid #f6f6f6;font-size: 14px; text-overflow: ellipsis ;white-space: nowrap;overflow: hidden;" >
                     
                                      {{item.title}}
                    
                                  </div>
                 
                       
                          </lay-card>
                      </lay-col>
                  </lay-row>
                  <lay-page @change="change"  v-model="pageconfig.page" :total="pageconfig.total" :limit="pageconfig.limit" :showPage="true">
                  </lay-page>
              </lay-card>
          </lay-col>
      </lay-row>
  </lay-container>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { layer } from "@layui/layer-vue";
import webosutils from 'webosutils';
const pageconfig=ref({
limit:12,
page:1,
total:0,
search:{
  title:""
},
data:{title:"",data:[] as any}
});
const ajax = () => {

  webosutils.http.post("/v1/api/portalsite/GetNew", {type:"B82AB160-7C17-4124-94FE-892F8B390DB8",title:pageconfig.value.search.title,  page: pageconfig.value.page, limit: pageconfig.value.limit },"请稍等").then((res:any) => {

  pageconfig.value.total=res.count;
  pageconfig.value.data.data = Object.freeze( res.data);
 // pageconfig.value.data.title="免费ppt模板下载";
  var win=window as any;
  win.scrollTo(0,0)

}).catch((res:any) => {

})



}
ajax();
const change=( page:any)=>{

pageconfig.value.page=page.current;
pageconfig.value.limit=page.limit;
ajax();
}
const a_search=()=>{
pageconfig.value.page=1;
ajax();
}




</script>

<style scoped>
:deep(.card-list-item .layui-card-body img){
  width: 100%;
}

:deep(.card-list-item .layui-card-body){
  padding: 0px !important;
}

.button-list {

  display: flex;
}

.button-list > div {
  flex: 1;
  text-align: center;
  color: #909399;

}
.layui-card .layui-card-footer{
  height: 42px;line-height: 42px;padding: 0 15px; border-top: 1px solid #f6f6f6;font-size: 14px;
}
.alone {
  text-align: center;
  

  transition: all .3s;
  -webkit-transition: all .3s;
}
.alone a {
  display: block;
  padding: 5px 5px;
  color: #fff;
  font-size: 14px;
}
.alone:hover a{color:#fff!important;background-color:#316cba}
</style>
